<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>ESDC</title>
    <link rel="stylesheet" href="css/index.css">
    <style>
        :root {
            --shadow-color: #a6a6a6;
            --shadow-color-light: #b8b8b8;
        }
        body {
            overflow-x: hidden; /* 隐藏水平滚动条 */
            overflow-y: hidden; /* 隐藏垂直滚动条 */
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            background: #111111;
            height: 10000px;
        }
        #myCanvas canvas{
            z-index: 0;
            background: #000000;
            height: 100%;
            width: 100%;
            position: absolute;
        }
        .outputImage {
            position: absolute;
            width: 600px;
            top: 50%;
            transform: scale(2) translateY(-50%);
            filter: blur(100px);
            transition: 3s filter, 2s transform;
            border-radius: 4px;
            overflow: hidden;
        }
        .isInitialized .outputImage {
            filter: none;
            border-radius: 4px;
            transform: scale(1) translateY(-50%);
        }
        .outputImage img {
            width: 100%;
            height: auto;
        }
        .inputImageList {
            position: absolute;
            top: 0;
            display: flex;
            flex-wrap: nowrap;
            width: 100vw;
            height: 300px;
            gap: 80px;
        }

        .inputImage {
            z-index: 2;
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            flex-shrink: 0;
            box-shadow: 0px 3px 20px #00000033;
            transform: translate(calc(50vw - 50%), calc(50vw - 50%));
            transform-origin: 50% 50%;
            cursor: pointer;
            transition: opacity 1000ms;
            opacity: 0;
        }

        .inputImage:hover {
            filter: none !important;
            z-index: 1;
            transition: 500ms filter;
        }

        .inputImage img {
            position: absolute;
            width: 200px;
            height: auto;
            background: #ffcccc;
            border-radius: 4px;
            left: 0;
            top: 0;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<!-- 标头：导航，logo -->
<div class="head">
    <div class="logo">
        <a href="index.html"><img src="imgs/index/ESDC_logo.jpg" alt=""></a>
        <div class="logo_name">
            <h1>&nbsp;工&nbsp;程&nbsp;软&nbsp;件&nbsp;研&nbsp;发&nbsp;中&nbsp;心</h1>
            <p>&nbsp;Engineering Software Development Centre</p>
        </div>
    </div>
    <div class="top_list">
        <ul>
            <li><a href="visitor.html">访客</a></li>
<!--            <li><a href="">邮箱</a></li>-->
            <li class="dropdown"><a href="">联系我们</a>
                <div class="dropdown-content">
                    <p>电话：123-456-7890</p>
                    <p>邮箱：contact@example.com</p>
                    <p>地址：北京市朝阳区</p>
                </div>
            </li>
            <li id="userProfileBtn" style="display: none;">
                <a href="javascript:void(0);" onclick="showPersonalBox()">用户名</a>
            </li>
            <li id="loginRegisterBtn">
                <a href="javascript:void(0);" onclick="showLoginBox()">登录</a><span>/</span><a href="javascript:void(0);" onclick="showRegistrationBox()">注册</a>
            </li>
        </ul>
    </div>
    <div class="bottom_nav">
        <ul>
            <li><a href="aboutUs.html">关于我们</a></li>
            <li><a href="researchFindings.html">研究成果</a></li>
            <li><a href="newsEvents.html">新闻活动</a></li>
            <li><a href="cooperation.html">合作交流</a></li>
        </ul>
    </div>
    <div class="test"></div>
</div>

<div class="inputImageList">
    <div class="inputImage">
        <img src="imgs/index/bigCarousel1.jpg"></div>
    <div class="inputImage">
        <img src="imgs/index/bigCarousel2.jpg"></div>
    <div class="inputImage">
        <img src="imgs/index/bigCarousel3.jpg"></div>
    <div class="inputImage">
        <img src="imgs/index/bigCarousel4.jpg"></div>
    <div class="inputImage">
        <img src="imgs/index/bigCarousel5.jpg"></div>
    <div class="inputImage">
        <img src="imgs/index/bigCarousel6.jpg"></div>
    <div class="inputImage">
        <img src="imgs/index/bigCarousel7.jpg"></div>
    <div class="inputImage">
        <img src="imgs/index/bigCarousel8.jpg"></div>
    <div class="inputImage">
        <img src="imgs/index/bigCarousel1.jpg"></div>
    <div class="inputImage">
        <img src="imgs/index/bigCarousel2.jpg"></div>
    <div class="inputImage">
        <img src="imgs/index/bigCarousel3.jpg"></div>
    <div class="inputImage">
        <img src="imgs/index/bigCarousel4.jpg"></div>
    <div class="inputImage">
        <img src="imgs/index/bigCarousel5.jpg"></div>
    <div class="inputImage">
        <img src="imgs/index/bigCarousel6.jpg"></div>
    <div class="inputImage">
        <img src="imgs/index/bigCarousel7.jpg"></div>
    <div class="inputImage">
        <img src="imgs/index/bigCarousel8.jpg"></div>
    <div class="inputImage">
        <img src="imgs/index/bigCarousel3.jpg"></div>
    <div class="inputImage">
        <img src="imgs/index/bigCarousel4.jpg"></div>
</div>
<!--&lt;!&ndash; 轮播图 &ndash;&gt;-->
<!--<div class="bigCarousel">-->
<!--    &lt;!&ndash; 图片 &ndash;&gt;-->
<!--    <div class="bigCarousel-1">-->
<!--        <ul>-->
<!--            <li><a href="index.html"><img src="imgs/index/bigCarousel1.jpg" alt=""><span class="sentence">LOGO</span></a></li>-->
<!--            <li><a href=""><img src="imgs/index/bigCarousel2.jpg" alt=""><span class="sentence">大屏幕</span></a></li>-->
<!--            <li><a href=""><img src="imgs/index/bigCarousel3.jpg" alt=""><span class="sentence">工作位</span></a></li>-->
<!--        </ul>-->
<!--    </div>-->
<!--    &lt;!&ndash; 指示器 &ndash;&gt;-->
<!--    <div class="bigCarousel-indicators">-->
<!--        <ul>-->
<!--            <li class="active"></li>-->
<!--            <li></li>-->
<!--            <li></li>-->
<!--        </ul>-->
<!--    </div>-->
<!--</div>-->
<!-- 弹窗 -->
<div id="loginBox" class="login-box" style="display: none; position: fixed; z-index: 1000; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: transparent; padding: 0; width: 1200px; height: 850px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
    <iframe id="loginFrame" src="" frameborder="0" style="width: 100%; height: 100%; border: none;"></iframe>
</div>

<div class="myCanvas" id="myCanvas">
    <canvas></canvas>
</div>
<div class="canvasTTL">
    <p class="logo-1">ESDC</p>
</div>

<script>
    (function(){

        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame;
        var canvas = document.querySelector("canvas");
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight;

        var ctx = canvas.getContext("2d");

        ctx.globalCompositeOperation = "saturation"; //合成方法

        //stats.js
//   var stats = new Stats();
// document.body.appendChild( stats.domElement );

        var particles = [];

        var pIndex = 0;
        var frameId;


        /*             */
        /*Particle */
        /*            */

        function Particle(color,x,y,circleSize,radius){
            this.color = color;
            this.x = 0;
            this.y = 0;
            this.posX = x;
            this.posY = y;

            this.circleSize = circleSize;

            this.direction = getRandom(-1,1);

            this.wave;
            this.amplitude = getRandom(-50,50);
            this.waveSpeed = getRandom(2,3);
            this.speed = getRandom(1,2);

            particles[pIndex] = this;
            this.id = pIndex;
            pIndex++;

            this.radius = radius;
            this.count = 0;
        };

        Particle.prototype.draw = function(){
            this.radius += Math.sin(this.count*0.1);

            this.wave = Math.sin( Math.PI/180*this.count*this.waveSpeed * this.direction ) * this.amplitude;

            this.x = Math.sin( Math.PI/180*this.count * this.speed * this.direction ) * this.circleSize - this.radius/2 + this.wave + this.posX;
            this.y = Math.cos( Math.PI/180*this.count * this.speed * this.direction) * this.circleSize - this.radius/2 + this.wave + this.posY;

            this.count += 1;

            var colA = hex2rgba(this.color,1);
            var colB = hex2rgba(this.color,0);

            var grd = ctx.createRadialGradient( this.x+this.radius/2,  this.y+this.radius/2,  0,  this.x+this.radius/2,  this.y+this.radius/2, this.radius/2);
            grd.addColorStop(0, colA);
            grd.addColorStop(1,  colB);

            ctx.fillStyle = grd;
            ctx.beginPath();
            ctx.fillRect( this.x, this.y, this.radius, this.radius );
            ctx.closePath();
            ctx.fill();

        }



        var colorTips = [
            '#151313',
            '#0b0a0a',
            '#929392',
            '#e5ebec',
            '#171516'
        ]

        //function Particle(color,x,y,circleSize,radius){
        for(var i = 0; i < 30; i++){
            var r = Math.floor( getRandom(0,colorTips.length) );
            new Particle( colorTips[r], getRandom(0,canvas.width/2), getRandom(0,canvas.height), getRandom(-canvas.width,canvas.width),getRandom(500,1000));
        }



        //function Particle(circleSize,radius,x,y,direction,speed,amplitude,waveSpeed){

        function loop(){
            ctx.clearRect(0,0, canvas.width, canvas.height);  //画面更新

            //Particle描画
            for(var i in particles){
                particles[i].draw();
            }

            frameId = requestAnimationFrame(loop);
            if(frameId % 2 == 0) { return; }//60fps
            stats.update();
        }

        loop();


        window.addEventListener("resize", function(){
            // canvas.width = window.innerWidth;
            // canvas.height = window.innerHeight;
            // x = canvas.width / 2;
            // y = canvas.height / 2;
        });


        function getRandom(min, max) {
            return Math.random() * (max - min) + min;
        }


        function hex2rgba (hex, alpha = 1) {


            let r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
            let c = null
            if (r) {
                c = r.slice(1,4).map(function(x) { return parseInt(x, 16) })
            }

            r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i)
            if (r) {
                c = r.slice(1,4).map(function(x) { return 0x11 * parseInt(x, 16) })
            }

            if (!c) {
                return null
            }
            return `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${alpha})`
        }


    })();
</script>
<script src="js/index.js"></script>
<script src="js/window.js"></script>
<script>
    const inputImages = document.querySelectorAll('.inputImage')
    const outputImage = document.querySelector('.outputImage')
    let frame = 0;
    let mouseX = window.innerWidth / 2;
    let mouseY = window.innerHeight / 2;
    const blurMax = 30;
    const imageProps = []
    window.addEventListener('scroll', handleScroll)
    window.addEventListener('mousemove', handleMousemove)
    let scrollY = window.scrollY;
    function handleScroll(e) {
        scrollY = window.scrollY;
        // update()
    }
    function handleMousemove(e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
    }
    function handleMouseenter(e,i) {
        imageProps[i].isHovered = true;
    }
    function handleMouseleave(e,i) {
        imageProps[i].isHovered = false;
    }
    initialize()

    function initialize() {
        setTimeout(() => {
            document.body.classList.add('isInitialized')
        }, 100)
        inputImages.forEach((image, i) => {
            const rect = image.getBoundingClientRect()
            setTimeout(() => {
                image.style.opacity = 1;
                imageProps[i] = {
                    startRho: (0.35 + Math.random() * 0.75) * ((window.innerHeight + window.innerWidth) / 4),
                    startPhi: Math.random() * Math.PI * 2,
                    startTheta: (i / inputImages.length) * Math.PI * 6,
                    startSpeed: i / inputImages.length * 4,
                    frame: 0,
                    focalDepth: 0,
                    isHovered: false
                }
            }, i * 300)
            image.addEventListener('mouseenter', (e) => {handleMouseenter(e, i)})
            image.addEventListener('mouseleave', (e) => {handleMouseleave(e, i)})
        })
        update()
    }

    function update() {
        imageProps.forEach((imageProp, i) => {
            const image = inputImages[i]
            if (!imageProps[i].isHovered) {
                imageProp.frame += 1;
                imageProp.focalDepth += 0.01
            }
            const rect = image.getBoundingClientRect()
            // const x = rect.left + rect.width / 2
            // const y = rect.top + rect.height / 2
            const centerX = window.innerWidth / 2
            const centerY = window.innerHeight / 2
            const theta = Number(imageProp.startTheta) + (imageProp.frame + imageProp.startSpeed) * 0.001
            const x = centerX + Math.cos(theta) * imageProp.startRho
            const z = Math.cos(imageProp.startPhi) * imageProp.startRho
            const scale = 0.6 + Math.abs(z / 400)
            const focalDist = 0.5 * (Math.cos(imageProp.focalDepth))
            const y = centerY + Math.sin(theta) * imageProp.startRho - scrollY * scale * 0.5
            const dist = Math.sqrt(Math.pow(Math.abs(mouseX - x), 2) + Math.pow(Math.abs(mouseY - y), 2)) / window.innerWidth;
            const blur = Math.max(0, focalDist * blurMax)
            const opacity = 1 - blur / blurMax;
            // image.style.opacity = opacity;
            image.style.filter = `blur(${blur}px)`
            // image.style.transform = `perspective(100vw) rotateY(${-dist * 10}deg) scale(${1 + dist * 0.2})`;
            image.style.transform = `perspective(100vw) translate3d(${x - rect.width / 2}px, ${y - rect.height / 2}px, ${0}px) scale(${scale})`
            if (opacity < 0) {
                image.style.opacity = 0;
                image.style.filter = "none"
            }
        })
        requestAnimationFrame(update)
    }
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        checkLoginStatus(); // 页面加载时检查登录状态
        document.addEventListener('loginStatusChanged', checkLoginStatus); // 监听登录状态变化事件
    });


    function updateUserInfo(username) {
        const userProfileBtn = document.getElementById('userProfileBtn');// 用户名按钮
        const loginRegisterBtn = document.getElementById('loginRegisterBtn');// 登录注册按钮

        if (userProfileBtn && loginRegisterBtn) {
            userProfileBtn.querySelector('a').innerText = username;
            userProfileBtn.style.display = 'inline'; // 显示用户名按钮,inline保证不被换行
            loginRegisterBtn.style.display = 'none'; // 隐藏登录注册按钮
        } else {
            console.error('User profile or login register button not found');
        }
    }
</script>

</body>
</html>
